<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .banner {
            width: 300px;
            height: 200px;
            margin: 40px auto;
            position: relative;
            background-color: #f00;
            overflow: hidden;
        }
        .banner ul {
            width: 1500px;
            height: 200px;
            display: flex;
            position: absolute;
        }
        .banner ul li {
            width: 300px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
        }
        .banner ol {
            width: 100%;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 0;
        }
        .banner ol li {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 10px;
        }
        .banner span {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: #fff;
            background-color: #000;
        }
        .next {
            right: 0;
        }
        .active{
            background-color: #ff0;
        }
    </style>
</head>
<body>


    <div class="banner">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>1</li>
        </ul>
        <ol>
            <li class="active dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ol>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>


    <script>

        // 无缝轮播
        //    把第一张复制一个放在最后面
        //    播放到最后一张的时候(也是第一张),在播放完这一张的瞬间切换到第一张



        // bug 
        //   长时间不看页面的时候(页面失去了焦点) ， 由于失去焦点以后DOM会延迟DOM操作，但是定时器不会受影响
        


        // bug  快速点击的时候
        //    原因：move里面的定时器会出现叠加的情况
        //    解决：在Move播放图片的时候，不允许点击 ， 播放完毕了才可以继续点击
        //    flag


        // bug  
        //   外面控制播放第几张的这个定时器的时间尽量长一些
        //   move里面的定时器的时间尽量短一些




        var oBanner = document.querySelector('.banner') ;
        var oUl = oBanner.querySelector('ul') ;
        var oUlLis = oUl.querySelectorAll('li') ;
        var oOlLis = oBanner.querySelectorAll('ol li') ;
        var oPrev =oBanner.querySelector('.prev') ;
        var oNext = oBanner.querySelector('.next') ;
        var w = oBanner.offsetWidth ;

        // 定时器
        var t = null ;

        // 当前播放第几张
        var index = 0 ;

        var flag = true ;


        // 
        for(var i = 0 ; i < oOlLis.length ; i++) {
            // oOlLis[i].setAttribute('index' , i) ;

            // 把标签看成js对象  给对象自定义属性
            oOlLis[i].data = i ;
        }


        autoPlay() ;


        // 页面失去焦点以后，暂停播放
        window.onblur = function() {
            clearInterval(t) ;
        }

        window.onfocus = function() {
            autoPlay() ;
        }


      
        oBanner.onclick = function(e) {
            var e = e || event ;
            var target = e.target || e.srcElement ;

            // 上翻页
            if(target.className === 'prev') {
                if(flag) {
                    clearInterval(t) ;
                    index-- ;
                    move(oUl ,  -index * w , function() {
                        if(index === 0) {
                            index = oUlLis.length - 1 ;
                            oUl.style.left = -index * w + 'px' ;
                        }
                    }) ;
                    showDot() ;
                    return ;
                }
            }

            // 下翻页
            if(target.className === 'next') {
                if(flag) {
                    clearInterval(t) ;
                    index++ ;
                    move(oUl ,  -index * w ,  function() {
                        if(index === oUlLis.length - 1) {
                            index = 0;
                            oUl.style.left = -index * w + 'px' ;
                        }
                    }) ;
                    showDot() ;
                    return ;
                }
            }

            // 小点切换
            if(target.className === 'dot') {
                if(flag) {
                    clearInterval(t) ;
                    // index = 当前点击的小圆点;
                    // index = target.getAttribute('index') ;
                    index = target.data ;
                    move(oUl ,  -index * w ) ;
                    showDot() ;
                }
            }
        }


        // 自动播放
        function autoPlay() {
            t = setInterval(function(){
                index++ ;
               
                move(oUl , -index * w , function() {
                    // 播放到最后一张的时候(也是第一张),在播放完这一张的瞬间切换到第一张
                    if(index === oUlLis.length - 1) {
                        index = 0 ;
                        oUl.style.left = 0 ;
                    }
                }) ;
                showDot() ;
            } , 2000)
        }


        function showDot() {
            // 清除其他的active
            for(var i = 0 ; i < oOlLis.length ; i++) {
                oOlLis[i].classList.remove('active') ;
            }
            // 给当前这一个添加active
            // 因为图片实际放了5张，但是小点只有4个   图片播放第五张的时候(也就是第一张)，第一个小点就显示
            if(index === oUlLis.length - 1) {
                oOlLis[0].classList.add('active') ;
            } else {
                oOlLis[index].classList.add('active') ;
            }
            
        }








        function move(ele , end , fn) {
            var t = setInterval(function(){
                var x = ele.offsetLeft ;
                var speed = (end - x) / 10 ;

                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) ;
                
                x += speed ;
                ele.style.left = x + 'px' ;
                if(Math.abs(x - end) <= Math.abs(speed)) {
                    x = end ;
                    ele.style.left = x + 'px' ;
                    clearInterval(t) ;
                    fn && fn()
                }
            } , 10)

        }



        function getCss(ele , prop) {
            if(window.getComputedStyle) {
                return parseInt(getComputedStyle(ele)[prop])
            }
            return parseInt(ele.currentStyle[prop])
        }

        


    </script>
    
</body>
</html>